<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>flexbox flex</title>
	<style type="text/css">
		.flexbox {
			display: flex;
			background: #DCDEE0;
		}
		.item {
			min-height: 100px;
			background: #0365C0;
			margin: 10px;
			color: #fff;
			line-height: 3;
			padding: 10px;
			flex: 1;
			/*width: 100px;*/
		}
		.item:nth-child(2) {
			width: 200px;
		}
		.item:nth-child(3) {
			width: 250px;
		}
	</style>
</head>
<body>
	<div class="flexbox">
		<div class="item"><p>学不可以已。</p></div>
		<div class="item"><p>青，取之于蓝，而青于蓝。</p></div>
		<div class="item"><p>故不积跬步，无以至千里；不积小流，无以成江海。</p></div>
	</div>
	<ul>
		<li>默认子元素宽度由其内容决定</li>
		<li>如果不设置宽度，直接设置“flex:1;”则三个等分</li>
		<li>如果设置宽度，则剩余宽度等分</li>
	</ul>
</body>
</html>





